<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VMaster 介绍</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body {
				padding: 20px 20%;
				background-color: bisque;
			}
			@media screen and (min-width: 400px) and (max-width: 1200px) {
			    body {
			    	padding: 20px 20px;
			    }
			}
			.description {
				display: flex;
				align-items: center;
				margin: 30px 20px;
				padding-left: 10px;
				font-style: oblique;
				border-left: 6px solid chocolate;
			}
			.title {
				margin-top: 20px;
				margin-bottom: 10px;
			}
			.image {
				width: 100%;
			}
			.footer {
				text-align: center;
				margin: 50px 0;
			}
		</style>
	</head>
	<body>
		<h2>你好，欢迎了解 VMaster ！</h2>
		<div class="description">
			因为我的云服务器过期了，续费超贵就没再用。那就以这种方式提供一下 VMaster 的相关截图吧(*^▽^*)
		</div>
		
		<h4 class="title">1. 可视化项目管理页，也是系统首页。</h4>
		<img class="image" src="./img/index.jfif" alt="" srcset="">
		
		<h4 class="title">2. 资源管理页</h4>
		<img class="image" src="./img/assets.jfif" alt="" srcset="">
		
		<h4 class="title">3. 设计器面板，左侧是幻灯片列表（可多页）和组件列表，右侧是属性配置、数据源配置、交互配置面板。</h4>
		<img class="image" src="./img/design.jfif" alt="" srcset="">
		<img class="image" src="./img/design2.jfif" alt="" srcset="">
		
		<h4 class="title">4. 数据源配置和数据过滤器配置页</h4>
		<img class="image" src="./img/filter.jfif" alt="" srcset="">
		
		<h4 class="title">5. 设计过的最宽屏，6400*1920。</h4>
		<img class="image" src="./img/demo1.png" alt="" srcset="">
		<img class="image" src="./img/demo2.jpg" alt="" srcset="">
		
		<h2 class="footer">———— 谢谢！————</h2>
	</body>
</html>
